<template>
	<div>
		<h2>HomeComp</h2>
		<!-- 一级路由组件中的router-view，会渲染二级路由组件 -->
		<ul class="nav nav-tabs">
			<li>
				<!-- <router-link
					:to="`/home/news?name=${person.name}&age=${person.age}`"
					active-class="home-active"
				>
					News
				</router-link> -->
				<!-- <router-link
					:to="{
						path: '/home/news',
						query: person,
					}"
					active-class="home-active"
				>
					News
				</router-link> -->
				<!-- <router-link
					:to="{
						path: '/home/news',
						query: {
							name: person.name,
							age: person.age,
						},
					}"
					active-class="home-active"
				>
					News
				</router-link> -->
				<router-link
					:to="{
						name: 'NewsComp',
						query: {
							name: person.name,
							age: person.age,
						},
					}"
					active-class="home-active"
				>
					News
				</router-link>
			</li>
			<li>
				<router-link to="/home/message" active-class="home-active">
					Message
				</router-link>
			</li>
		</ul>
		<router-view />
	</div>
</template>

<script>
export default {
	name: "HomeComp",
	props: {
		age: {
			type: Number,
			required: true,
		},
		sex: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {
			person: {
				name: "jack",
				age: 18,
			},
		};
	},
};
</script>

<style>
.home-active {
	background-color: pink !important;
	color: #fff !important;
}
</style>
